import { memo, useCallback, useEffect, useState } from 'react';
import type { ReactNode, FC } from 'react';

import { CommentatorWrapper, RankRemarkWrapper } from './style';
import ListHeaderV2 from '@/components/list-header-v2';
import { Pagination } from 'antd';
import { getComments } from '../../views/discover/c-components/ranking/service/rank';
import { formatTimestamp, getImgOnSize } from '@/utils/format';
interface IProps {
  children?: ReactNode;
  id: number;
  category: string;
}
/*
  评论区
*/
const RankCommend: FC<IProps> = (props) => {
  const { id, category } = props;
  const [comments, setComments] = useState<any>(null);
  const [offset, setOffset] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const [textTotal, setTextTotal] = useState(140);

  const limit = 20;
  let commentsTotal = 0;
  let total = 0;
  if (comments) {
    commentsTotal = comments.total;
    total = Math.ceil(commentsTotal / limit);
  }

  useEffect(() => {
    fetchComments();
  }, [offset]);
  const fetchComments = useCallback(async () => {
    // console.log('album', id);
    setIsLoading(false);
    try {
      const response: any = await getComments(id, limit, (offset - 1) * limit, category);
      setComments(response);
    } catch (error) {
      console.log('ERROR', error);
    } finally {
      setIsLoading(true);
    }
  }, [id, offset]);

  const handlePgChange = useCallback((page: number) => {
    setOffset(page);
    // console.log(page);
  }, []);

  return (
    <RankRemarkWrapper>
      <ListHeaderV2 name={'评论'} trackCount={`共${commentsTotal}评论`} count={0}></ListHeaderV2>
      <CommentatorWrapper>
        <div className="commentatorImg">
          <img src="https://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50" alt="" />
        </div>
        <div className="commentaries">
          <textarea
            name=""
            id=""
            placeholder="评论"
            maxLength={140}
            onChange={(e) => {
              setTextTotal(140 - e.target.value.length);
            }}
          ></textarea>
          <div className="ctrl">
            <i className="icons expressions"></i>
            <i className="icons designation"></i>
            <div className="right">
              <span>{textTotal}</span>
              <a className="sprite_button2">评论</a>
            </div>
          </div>
          <div className="arrclr">◆</div>
          <div className="arrclrIn">◆</div>
        </div>
      </CommentatorWrapper>
      {isLoading ? (
        <div className="commentariesDetail">
          <div className="head">
            <span>精彩评论</span>
          </div>
          {comments.comments.map((comment: any) => {
            return (
              <div className="comment">
                <div className="img">
                  <img src={getImgOnSize(comment.user.avatarUrl, 50)} alt="" />
                </div>
                <div className="info">
                  <div className="content">
                    <a className="name">{comment.user.nickname} : </a>
                    {comment.content}
                  </div>
                  <div className="ctrl">
                    <div>{formatTimestamp(comment.time, 1)}</div>
                    <div>
                      <i className="praise_icon sprite_icon3"></i>
                      <a
                        className="praise"
                        onClick={(e) => {
                          e.preventDefault();
                        }}
                      >
                        (3366)
                      </a>
                      <span> | </span>
                      <a
                        className="callback"
                        onClick={(e) => {
                          e.preventDefault();
                        }}
                      >
                        回复
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
          <Pagination
            defaultCurrent={offset}
            total={total}
            showSizeChanger={false}
            align="center"
            onChange={handlePgChange}
          />
        </div>
      ) : (
        <div>...Loading{isLoading}</div>
      )}
    </RankRemarkWrapper>
  );
};

export default memo(RankCommend);
